<template>
    <div class="CateShowPage">
        <HomeGird :categoryList="categoryList"/>
        <ul>
            <li v-for="(item,index) in goodsList" :key="index"  @click="handelSwitchGoodsBuy(item.goods_id)">
                <div class="pic">
                    <img width="100%" height="100%" :src="item.goods_thumbnail_url" alt="">
                </div>
                <p class="title">{{item.goods_name}}</p>
                <div class="info">
                    <p>
                        <span class="symbol">￥</span>
                        <span class="price">{{item.min_group_price/100}}</span>
                    </p>
                    <span class="pay">点击购买</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "CateShowPage",
        data(){
            return{
                categoryList:[],
                goodsList:[],
                has_more:false,
            }
        },
        props:["opt_id","keyword"],
        created() {
            this.getCategoryTagList()
            this.getKeywordSearchList(this.keyword)
        },
        methods:{
            async getCategoryTagList(){
                const result =await this.axios.post("categoryTagList",{
                    opt_id:this.opt_id
                })
                console.log(this.opt_id)
                this.categoryList=result.data
                // console.log(result.data)
            },
            async getKeywordSearchList(keyword){
                const result = await this.axios.post('/keywordSearchList',{
                    keyword
                })
                console.log(result.data)
                this.has_more = result.data.has_more
                this.goodsList = result.data.goods_list
            },
            handelSwitchGoodsBuy(id){
                this.$router.push({
                    path: '/goodsBuy',
                    query:{
                        goods_id: id
                    }
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .CateShowPage{
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            background: #ddd;
            li {
                width: 370px;
                height: 500px;
                background: white;
                margin-bottom: 10px;
                .pic{
                    height: 370px;
                }
                .title{
                    height: 54px;
                    line-height: 54px;
                    padding: 0 15px;
                    color: #151516;
                    font-size: 25px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .info{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: orangered;
                    line-height: 50px;
                    padding: 0 15px;

                    .symbol{
                        font-size: 12px;
                    }
                    .price{
                        font-size: 28px;
                        font-weight: bold;
                    }
                    .pay{
                        font-size: 24px;
                        line-height: 50px;
                    }
                }
            }
        }
    }
</style>